<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>时钟</title>
</head>
<style>
  /* 把所有标签的内外边距清零 */
  
* {
	margin: 0;
	padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,i {
	font-style: normal
}

/* 去掉li的小圆点 */
li {
	list-style: none
}
/*  */
img {
  /* border: 0  照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题*/
	border: 0;
  /* 取消图片底侧有空白缝隙的问题 */
	vertical-align: middle
}


button {
/* 当鼠标经过button 按钮时，鼠标变成小手 */
  cursor: pointer
}

a {
	color: #666;
	text-decoration: none
}

a:hover {
	color: #c81623
}

button,input {
  /* "\5B8B\4F53" 宋体 直接写汉字有些浏览器会出现乱码 */
	font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
}


body {
  /* css3属性 文字放大后减少锯齿性 让文字显示的更加清晰 */
	-webkit-font-smoothing: antialiased;
	background-color: #fff;
	font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
	color: #666
}

/* 不显示的标签可以加入hide */
.hide,.none {
	display: none
}

/* 清除浮动 */
.clearfix:after {
	visibility: hidden;
	clear: both;
	display: block;
	content: ".";
	height: 0
}

.clearfix {
  /* zoom 页面缩放 这里设置为1不缩放 */
	*zoom: 1
}


  body{
    background-color: rgb(245, 245, 245);
  }
  .demo{
    position: relative;
  }

  .clock{
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    border: 15px solid   #264e70;
    border-radius: 50%;
    background-color: rgba(103, 145, 134);
  }
  .clock i{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    z-index: 12;
  }
  .clock .number span{
    font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    display: block;
    position: absolute;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 25px;
    text-align: center;
    color: #fff;
  }
  .clock .number .s12{
    top: 0;
    left: 204px;
    transform: translate(-23px);
  }
  .clock .number .s3{
    top: 150px;
    right: 0;
    transform: translateY(20px);
  }
  .clock .number .s6{
    bottom: 0;
    left: 186px;
  }
  .clock .number .s9{
    top: 167px;
    left: 0;
    transform: translateY(20px);
  }


  #hour{
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -7.5px;
    width: 15px;
    height: 100px;
    background-color: #bbd4ce;
    z-index: 11;
    transform-origin: bottom;
  }
  #min{
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -7.5px;
    width: 15px;
    height: 140px;
    background-color:#fdebd3;
    z-index: 10;
    transform-origin: bottom;
  }
  
  #second{
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -7.5px;
    width: 15px;
    height: 180px;
    background-color:#f9b4ab;
    z-index: 9;
    transform-origin: bottom;

  }

</style>
<body>
  <div class="demo">
    <div class="clock">
      <i></i>
      <!-- 时间刻度 -->
      <div class="number">
        <span class="s12">12</span>
        <span class="s3">3</span>
        <span class="s6">6</span>
        <span class="s9">9</span>
      </div>
      <!-- 时针 -->
      <div id="hour"></div>
      <!-- 分针 -->
      <div id="min"></div>
      <!-- 秒针 -->
      <div id="second"></div>      
    </div>
  </div>

  <script>
    
    const Hour = document.getElementById('hour');
    const Min = document.getElementById('min');
    const Second = document.getElementById('second');
    
    let date = '';
    // 初始化刷新时间
    window.onload = function(){
      getNewDate();
    }
    // 获取最新时间，间隔0.5s
    setInterval(getNewDate, 500);
    // 刷新钟表刻度,间隔1s
    setInterval(clock,1000)

    // 刷新时间
    function getNewDate(){
      date = new Date()      
    }

    function clock(){
      // 设置指针
      // 时针
      x = date.getHours();
      // 分针
      y = date.getMinutes();
      // 秒针
      z = date.getSeconds();
      
      // 24小时转12小时
      if(x >= 12){
        x = x - 12;
      }
      // 1.时针处理
      const h_angle = x * 30 + y / 60 * 30 ;
      Hour.style.transform = "rotate(" + h_angle + "deg)";      
      // 2.分针处理
      const m_angle = y / 60 * 360;
      Min.style.transform = "rotate(" + m_angle + "deg)";
      // 3.秒针处理
      const s_angle = z / 60 * 360;
      Second.style.transform = "rotate(" + s_angle + "deg)";
    }
  </script>
</body>
</html>